<template>
  <el-card shadow="hover" style="max-width: 900px; margin: 40px auto; border-radius: 16px;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h2>我的项目</h2>
      <el-button type="primary" icon="el-icon-plus">新建项目</el-button>
    </div>
    <el-table :data="projects" style="width: 100%; margin-top: 20px;" stripe border>
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="项目名称" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" type="primary" icon="el-icon-view">查看</el-button>
          <el-button size="small" icon="el-icon-edit">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="2"
      style="margin-top: 16px; text-align: right;"
    />
  </el-card>
</template>

<script setup lang="ts">
const projects = [
  { id: 1, name: '项目A' },
  { id: 2, name: '项目B' }
]
</script>
